<template>
    <div class="gasReportContainer">
        <el-row class="gasReportContainer_btn">
            <el-select v-model="reportId" placeholder="请选择" clearable class="idNumInput0" @change="changeReport">
                <el-option v-for="item in gastroscopeReportList" :key="item.id" :label="getLabel(item)" :value="item.id" />
            </el-select>
        </el-row>
        <div class="lists_containers_table">
            <div class="a4">
                <!-- <div style="position: relative">
                    <div style="position: absolute; top: 8px">
                        <el-button size="mini" @click="dataOutput">标注导出</el-button>
                        <el-button size="mini" @click="operateMarkLabel">{{ isClosed ? '结束标注' : '开始标注' }}
                        </el-button>
                        <el-button size="mini" @click="operateShowLabel">{{ isShowTag ? '隐藏标签' : '显示标签' }}
                        </el-button>
                        <el-button size="mini" @click="reGet">重新获取
                        </el-button>
                    </div>
                </div> -->
                <!-- <el-row class="title">{{
                    infoData.reportHospitalName
                }}</el-row>
                <el-row class="title">{{
                    infoData.reportHospitalHeadTitle
                }}</el-row> -->
                <el-row>
                    <el-col :span="12" class="heiti">电话：{{ infoData.reportHospitalPhone }}
                    </el-col>
                    <el-col :span="12" style="text-align: right" class="heiti">检查日期：{{ infoData.reportInspectionTime }}
                    </el-col>
                </el-row>
                <div class="cut-line"></div>
                <el-row>
                    <el-col :span="6" class="heiti">检查号:{{ infoData.medicalRecordNumber }}
                    </el-col>
                    <el-col :span="6" class="heiti">姓名:{{ infoData.reportPatientName }}
                    </el-col>
                    <el-col :span="6" class="heiti">性别:{{ infoData.reportPatientSex }}
                    </el-col>
                    <el-col :span="6" class="heiti">年龄:{{ infoData.reportPatientAge }}
                    </el-col>
                    <el-col :span="6" class="heiti">住院号:{{ infoData.reportPatientClassNumber }}
                    </el-col>
                    <el-col :span="6" class="heiti">床号:{{ infoData.reportPatientBedNumber }}
                    </el-col>
                    <el-col :span="6" class="heiti">科室:{{ infoData.reportPatientDepartment }}
                    </el-col>
                    <el-col :span="6" class="heiti">设备:{{ infoData.reportPatientEquipment }}
                    </el-col>
                    <el-col :span="6" class="heiti">检查名称:{{ infoData.reportPatientItemName }}
                    </el-col>
                </el-row>
                <div class="cut-line"></div>
                <el-row class="image-box">
                    <el-col :span="8" v-for="item in srcList" :key="item.index"
                        style="text-align: center; margin: 10px auto">
                        <el-image style="width: 150px; height: 150px" :src="item" :preview-src-list="srcList">
                        </el-image>
                        <div class="disease-name"></div>
                    </el-col>
                </el-row>
                <div class="cut-line"></div>
                <el-row>
                    <div class="heiti">检查所见：</div>
                    <!-- <div>{{ infoData.reportPatientInspectionSeen }}</div> -->
                    <div style="white-space: pre-wrap" v-html="infoData.reportPatientInspectionSeen"></div>
                </el-row>

                <el-row>
                    <div class="heiti">镜检诊断：</div>
                    <div>
                        <mark-label :key="timer" name="镜检诊断" :isShowTag="true" :labels="diagnosticBasisArray"
                            :data-content="jingjianzhenduan" :delete-label-father-method="deleteLabel"
                            :add-label-father-method="addLabel" :isClosed="isClosed" />
                    </div>
                </el-row>

                <el-row>
                    <div class="heiti">建议：</div>
                    <div>{{ infoData.reportPatientAdvice }}</div>
                </el-row>
                <el-row>
                    <div class="check-doctor">
                        检查医生：{{
                            infoData.reportPatientInspectionDoctor
                        }}
                    </div>
                </el-row>
                <div class="cut-line"></div>
                <el-row>
                    <el-col :span="12" style="color: red">{{ infoData.reportHospitalTailTitle }}
                    </el-col>
                    <el-col :span="12" style="text-align: right">报告日期：{{ infoData.reportTime }}
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>
</template>

<script>
import MarkLabel from './MarkLabel.vue';
export default {
    name: 'gasReport',
    components: {
        MarkLabel
    },
    props: {
        digitalSlicingData: {
            type: Object,
            default: {},
        },
        pathologyId: { //病例id
            type: [String, Number],
            default: '',
        },
        diagnosisId: { //诊断id
            type: [String, Number],
            default: '',
        },
    },
    data() {
        return {
            timer: '',
            diagnosticBasisArray: [], // 诊断依据字典
            isClosed: false,
            reportId: '',
            infoData: {},
            srcList: [],
            jingjianzhenduan: {
                title: '镜检诊断',
                text: '',
                labels: [],
            },
            gastroscopeReportList: []
        };
    },
    watch: {
        gastroscopeReportList: function (newArr, oldArr) {
            if (newArr.length > 0) {
                this.getInfo(newArr[0].id);
            } else {
                this.jingjianzhenduan.text = '';
                this.jingjianzhenduan.labels = [];
                this.srcList = [];
                this.activeId = '';
                this.infoData = {};
            }
        },
    },
    computed: {

        device() {
            return this.$store.state.device
        }
    },
    async mounted() {
        await this.getDiagnosticBasis()
        await this.getGastroscopeReportList()
    },
    methods: {
        deleteLabel(name, text, labels, label) {
            this.updateLabels({
                id: this.reportId,
                analysisResult: JSON.stringify(labels),
            });
        },
        addLabel(name, text, labels, label) {
            this.updateLabels({
                id: this.reportId,
                analysisResult: JSON.stringify(labels),
            });
        },
        updateLabels(data) {
            if (!!data.id) {
                this.$axios({
                    method: 'POST',
                    url: `/gastroscopy_electronic_report/updateGastroscopyElectronicReport/by/id`,
                    data: data,
                }).then((res) => {
                    if (res.data.code !== 200) {
                        this.$message.error({ message: '标注接口请求错误' });
                    }
                });
            }
        },
        getDiagnosticBasis() {
            this.$axios({
                method: 'GET',
                url: '/dicts/list',
                params: {
                    code: 'diagnosticBasis',
                    page: 0,
                    size: 200,
                },
            }).then(async (res) => {
                if ((await res) && (await res.data.code) === 200) {
                    res.data.data.forEach((item) => {
                        this.diagnosticBasisArray.push({
                            label: item.name,
                            value: item.name,
                            outCode: item.outCode,
                        });
                    });
                    this.diagnosticBasisArray.sort((a, b) => {
                        return parseFloat(a.outCode) - parseFloat(b.outCode);
                    });
                }
            });
        },
        changeReport(e) {
            console.log(e)
        },
        getLabel(item) {
            let label = item.reportPatientName + ' (' + item.reportInspectionTime + ')'
            return label
        },
        getInfo(pId) {
            this.reportId = pId;
            this.jingjianzhenduan.text = '';
            this.jingjianzhenduan.labels = [];
            this.srcList = [];
            this.activeId = '';
            this.infoData = {};
            this.$axios({
                method: 'GET',
                url: `/gastroscopy_electronic_report/get/by/${pId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.timer = new Date().getTime();
                    let result = res.data.data;
                    this.infoData = result;
                    this.activeId = pId;
                    this.srcList = [];
                    //以句号分割并换行
                    if (
                        this.infoData.reportPatientItemName == '普通电子胃镜' ||
                        this.infoData.reportPatientItemName == '无痛电子胃镜'
                    ) {
                        this.infoData.reportPatientInspectionSeen =
                            this.infoData.reportPatientInspectionSeen.replace(
                                /\。/g,
                                '。</br>'
                            );
                    }

                    if (
                        this.infoData.reportPatientInspectionImagesStr === null
                    ) {
                        this.infoData.reportPatientInspectionImagesStr = [];
                    } else {
                        this.infoData.reportPatientInspectionImagesStr.forEach(
                            (element) => {
                                this.srcList.push(
                                    this.imageServiceURL + element
                                );
                            }
                        );
                    }
                    this.jingjianzhenduan.text =
                        this.infoData.reportPatientPathologicalDiagnosis;
                    let analysisResultArrar = JSON.parse(result.analysisResult);
                    if (analysisResultArrar) {
                        Object.keys(analysisResultArrar).map((key) => {
                            if (key === '内镜数据_检查结论') {
                                analysisResultArrar[key].entity_set.forEach(
                                    (item) => {
                                        this.jingjianzhenduan.labels.push({
                                            id: item.id,
                                            entity: item.entity,
                                            label: item.label,
                                            start: item.start,
                                            end: item.end,
                                            color:
                                                item.label.search('阴性') !== -1
                                                    ? 'success'
                                                    : item.label.search(
                                                        '阳性'
                                                    ) !== -1
                                                        ? 'danger'
                                                        : '',
                                        });
                                    }
                                );
                            }
                        });

                        this.jingjianzhenduan.labels.sort((a, b) => {
                            return a.start - b.start;
                        });
                    }
                } else if (res.data.code === 404) {
                    this.jingjianzhenduan.text = '';
                    this.jingjianzhenduan.labels = [];
                    this.srcList = [];
                    this.activeId = '';
                    this.infoData = {};
                    this.$message.info(res.data.message);
                }
            });
        },
        getGastroscopeReportList() {
            this.$axios({
                method: 'GET',
                url: `/gastroscopy_electronic_report/getAll/by/${this.pathologyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let result = res.data.data;
                    this.gastroscopeReportList = result;
                }
            });
        },
        addSpectionEvent() {
            this.addMynotesDailog = true
            this.canScroll()
        },
        closedDailog() {
            this.canScroll()
            this.addMynotesDailog = false
        }
    },
};
</script>

<style scoped>
.gasReportContainer {
    height: 100%;
    position: relative;
}

.gasReportContainer_btn {
    margin-bottom: 20px;
}

.lists_containers_table {
    height: calc(100% - 60px);
    overflow: hidden;
    overflow-y: auto;
}

.btn-item {
    cursor: pointer;
    line-height: 28px;
    padding-left: 10px;
    border-radius: 2px;
}

.is-active {
    color: #ffffff;
    background-color: #10a1df;
}

.btn-item:hover {
    color: #ffffff;
    background-color: #10a1df;
}

.cut-line {
    width: 100%;
    border-bottom: 1px solid #000;
}

.a4 {
    width: 802px;
    height: 100%;
    margin: 0 auto;
    /* background-color: #e6e1e0; */
    background-color: #eeeeee;
    padding: 20px;
}

.a4 .title {
    text-align: center;
    letter-spacing: 2px;
    color: red;
    margin-bottom: 20px;
}

.image-box {
    padding: 0 100px;
}

.check-item {
    letter-spacing: 1px;
    padding-left: 14px;
}

.check-doctor {
    text-align: right;
    padding-right: 100px;
}

.heiti {
    font-family: 'SimHei';
    font-size: 16px;
    font-weight: bold;
    line-height: 35px;
}
</style>
